<!-- 个人信息 -->
<template>
    <div >
        <!-- <a-page-header
            style="border: 1px solid rgb(235, 237, 240);background:#fff"
            :title="'用户'+user.phone+'-'+user.nickname+'的个人信息'"
            @back="() => $router.go(-1)"
        ></a-page-header> -->
        <a-card title="个人信息" :bordered="false">
            <div style="display: flex;">
                <div style="text-align: center;min-width: 300px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                    <a-avatar :size="64" :src="user.headimgurl" />
                    <div style="margin: 10px 0">{{user.phone}}</div>
                    <div v-for="(item,i) in gradeList" :key="item.id + 'i'">
                        <a-tag v-if="item.grade == user.grade" :color="colors[i%13]">{{item.gradeName}}</a-tag>
                    </div>
                </div>
                <a-descriptions style="flex: 1"  bordered>
                    <a-descriptions-item label="昵称">{{user.nickname}}</a-descriptions-item>
                    <a-descriptions-item label="当月积分" :span="2">{{integral.thisMonthSum}}</a-descriptions-item>
                    <a-descriptions-item label="用户ID">{{user.userId}}</a-descriptions-item>
                    <a-descriptions-item label="累计积分" :span="2">{{integral.totalSum}}</a-descriptions-item>
                    <a-descriptions-item label="花店">{{user.shopName}}</a-descriptions-item>
                    <a-descriptions-item label="账户余额" :span="2">{{balance}}</a-descriptions-item>
                    <a-descriptions-item label="注册时间">{{user.createTime}}</a-descriptions-item>
                    <a-descriptions-item label="待到账" :span="2">{{awardDai}}</a-descriptions-item>
                    <a-descriptions-item label="所在城市">{{user.province}}-{{user.city}}-{{user.country}}</a-descriptions-item>
                    <a-descriptions-item label="总收益" :span="2">{{awardYi}}</a-descriptions-item>
                    <a-descriptions-item label="下单数量">{{buyCount}}</a-descriptions-item>
                    <a-descriptions-item label="下单金额" :span="2">{{buyAmount}}</a-descriptions-item>
                </a-descriptions>
            </div>
        </a-card>
        <a-card title="收货地址" :bordered="false" style="margin: 20px 0;">
            <a-table rowKey="id" :loading="isload" :columns="addressColumn" :data-source="addressList" :pagination="false" size="small" bordered>
                <div slot="detailedAddress" slot-scope="detailedAddress,record">
                    <div>{{record.province}}{{record.city}}{{record.area}}{{detailedAddress}}</div>
                </div>
                <div slot="isDefault" slot-scope="isDefault">
                    <a-switch checked-children="是" un-checked-children="否" disabled :checked="isDefault == 1 ? true : false" />
                </div>
            </a-table>
        </a-card>
        <a-card title="订单记录" :bordered="false">
            <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ total: total ,showSizeChanger: true,pageSize: size, pageSizeOptions: ['10','20','50','100']}" size="small" bordered>
                <div slot="amount" slot-scope="amount">
                    <span>{{amount}}</span>
                </div>
                <div slot="realAmount" slot-scope="realAmount">
                    <span>{{realAmount}}</span>
                </div>
                <div slot="rate" slot-scope="rate">
                    <span>{{(rate * 100).toFixed(2)}}%</span>
                </div>
                <div slot="serviceCharge" slot-scope="serviceCharge">
                    <span>{{serviceCharge}}</span>
                </div>
                <div slot="accountType" slot-scope="accountType">
                    <span>{{accountType }}</span>
                </div>
                <div slot="orderType" slot-scope="orderType">
                    <div v-for="type in orderTypeList" :key="type.orderType">
                        <span v-if="type.orderType == orderType">{{type.description}}</span>
                    </div>
                </div>
                <div slot="orderStatus" slot-scope="orderStatus">
                    <div v-for="status in orderStatusList" :key="status.id">
                        <span :class="`status${orderStatus}`" v-if="status.id == orderStatus">{{status.name}}</span>
                    </div>
                    <!-- <div v-for="(status,i) in orderStatusList" :key="status.id">
                        <a-tag v-if="status.id == orderStatus" :color="colors[i%13]">{{status.name}}</a-tag>
                    </div> -->
                </div>
            </a-table>
        </a-card>
    </div>
</template>

<script>
import { queryUserOrderFormSum , queryUserBuy , queryUserAwardRecordSum , queryUserAccount , queryUserReceiveAddress } from '@/api/member';
import { queryGradeProduct } from '@/api/product';
import { queryTransactionOrder } from '@/api/order';
import { addressColumn , columns } from './table';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            user: JSON.parse(this.$route.query.user,),
            gradeList: [],
            integral: {
                totalSum: 0, // 累计
                lastMonthSum: 0, // 上月合计
                thisMonthSum: 0, // 本月合计
                yesterdaySum: 0, // 昨日合计
            }, // 积分
            cny: {
                totalSum: 0, // 累计
                lastMonthSum: 0, // 上月合计
                thisMonthSum: 0, // 本月合计
                yesterdaySum: 0, // 昨日合计
            },
            balance: 0, // 余额
            awardDai: 0, // 待到账收益
            awardYi: 0, // 已到账收益
            buyCount: 0, // 下单数量
            buyAmount: 0, // 下单金额
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            addressColumn,
            columns,
            addressList: [], // 收货地址
            page: 1,
            size: 10,
            dataList: [],
            orderStatusList: [
                { id: 0, name: '待执行' },
                { id: 1, name: '已成功' },
                { id: 2, name: '已失败' },
                { id: 3, name: '待确认' },
            ],
        };
    },
    async created(){
        console.log(JSON.parse(this.$route.query.user,))
        try {
            this.gradeList = await this.getGrade();
            this._queryUserOrderFormSum('5');
            this._queryUserAwardRecordSum('1');
            this._queryUserAwardRecordSum('0');
            this._queryUserBuy();
            this._queryUserAccount();
            this._queryUserReceiveAddress();
            this.getOrder();
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        // 查询等级信息
        getGrade(brandId){
            let _this = this
            return new Promise((resolve,reject)=>{
                const params = {
                    'brandId':brandId,
                    'size':99,
                    'page':0,
                }
                queryGradeProduct(params)
                .then(res=>{
                    if(res.success){
                        resolve(res.data.content)
                    }else{
                        reject()
                    }
                })
            })
        },
        // 获取用户的余额和积分统计
        _queryUserOrderFormSum(accountType){
            let _this = this;
            const params = {
                'userId': _this.user.userId,
                'accountType': accountType, // 0: 余额，5： 积分
            }
            queryUserOrderFormSum(params)
            .then(res => {
                if(res.success){
                    if(accountType == '5'){
                        _this.integral = JSON.parse(JSON.stringify(res.data))
                    }else if(accountType == '0'){
                        _this.cny = JSON.parse(JSON.stringify(res.data))
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询收益统计
        _queryUserAwardRecordSum(status){
            let _this = this;
            const params = {
                'receiveUserId': _this.user.userId,
                'status': status,
            }
            queryUserAwardRecordSum(params)
            .then(res => {
                if(res.success){
                    if(status == '1'){
                        _this.awardYi = res.data;
                    }else if(status == '0'){
                        _this.awardDai = res.data;
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询下单数量和金额
        _queryUserBuy(){
            let _this = this;
            const params = {
                'userId': _this.user.userId,
            }
            queryUserBuy(params)
            .then(res => {
                if(res.success){
                    _this.buyCount = res.data.buyCount;
                    _this.buyAmount = res.data.buyAmount;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询账户余额
        _queryUserAccount(){
            let _this = this
            const params = {
                'brandId':_this.brandId,
                'userId':_this.user.userId,
                'accountType':'0',
                'size':1,
                'page':0,
            }
            queryUserAccount(params)
            .then(res=>{
                if(res.success){
                    if(res.data.content.length > 0){
                        _this.balance = res.data.content[0].balance
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询用户收货地址
        _queryUserReceiveAddress(){
            let _this = this;
            const params = {
                'userId': _this.user.userId,
            }
            queryUserReceiveAddress(params)
            .then(res => {
                if(res.success){
                    _this.addressList = res.data;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询交易订单
        getOrder(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'userId':_this.user.userId,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryTransactionOrder(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getOrder()
        },
    }
}

</script>
<style scoped>
.status0{
    color: #faad14
}
.status1{
    color: #52c41a
}
.status2{
    color: #f5222d
}
.status3{
    color: #faad14
}
</style>